<template>
  <div class="app-menu">
    <el-card class="box-card">
      <div slot="header" :inline="true">
        <el-form
          ref="form"
          :model="queryObject"
          :inline="true"
          class=" demo-form-inline"
        >
          <el-form-item label="资源名称" prop="name">
            <el-input v-model="queryObject.name"></el-input>
          </el-form-item>
          <el-form-item label="资源路径" prop="url">
            <el-input v-model="queryObject.url"></el-input>
          </el-form-item>

          <el-form-item label="资源分类" prop="categoryId">
            <el-select v-model="queryObject.categoryId" placeholder="资源分类">
              <el-option
                v-for="item in resourceCategories"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="reset" :disabled="isLoading">重置</el-button>
            <el-button type="primary" @click="onSubmit" :disabled="isLoading">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-loading="isLoading">
        <el-table
          :data="records"
          border
          style="width: 100%">

          <el-table-column
            type="index"
            label="编号"
            width="80"
            align="center">
          </el-table-column>

          <el-table-column
            prop="name"
            label="资源名称">
          </el-table-column>
          <el-table-column
            prop="url"
            label="资源路径">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述">
          </el-table-column>
          <el-table-column
            label="添加时间">
            <template slot-scope="scope">
              {{scope.row.createdTime | dateFormat}}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-button type="warning" size="small">修改</el-button>
              <el-button type="danger" size="small" @click="deleteResource(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.queryObject.current"
          :page-sizes="[10,15,20]"
          :page-size="this.queryObject.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
  import { getResourcePages, deleteResource, getAllResourceCategories } from '@/services/resource'
  import { dateFormat } from '@/utils/util'

  export function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  export default {
    name: 'ResourceIndex',
    data() {
      return {
        records: [],
        queryObject: {
          current: 1,
          size: 10,
          name: '',
          url: '',
          categoryId: undefined,
        },
        total: 0,
        resourceCategories: [],
        isLoading: false,
      }
    },
    created() {
      this.loadResources()
      this.loadAllResourceCategories()
    },
    methods: {
      async loadResources() {
        this.isLoading = true
        await sleep(3e3) // 模拟接口耗时的情况
        const { code, data } = await getResourcePages(this.queryObject)
        if (code === '000000') {
          this.records = data.records
          this.total = data.total
        }
        this.isLoading = false
      },
      async loadAllResourceCategories() {
        const { code, data } = await getAllResourceCategories()
        if (code === '000000') {
          this.resourceCategories = data
        }
      },
      handleSizeChange(size) {
        this.queryObject.size = size
        this.queryObject.current = 1
        this.loadResources()
      },
      handleCurrentChange(current) {
        this.queryObject.current = current
        this.loadResources()
      },
      onSubmit() {
        this.queryObject.current = 1
        this.loadResources()
      },
      reset() {
        this.$refs.form.resetFields()
        this.queryObject.current = 1
        this.loadResources()
      },
      deleteResource(id) {
        const that = this
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { code } = await deleteResource(id)
          if (code === '000000') {
            this.$message.success('删除成功')
            that.loadResources()
          }
        })
      }
    },
    filters: {
      dateFormat,
    }
  }
</script>
